<template>
  <div id="index">
    <div id="header">
      <div class="total">
        <span>品类共计: {{kindNumber}}</span>
        <span>菜品共计: {{totalNumber}}</span>
      </div>
      <div class="add" @click="addMenuClass()">
        <div>+</div>
        <div>添加品类</div>
      </div>
    </div>
    <div id="section">
      <div class="kindItem"  v-for="(item,index) in menuClass" :key="index" >
        <div class="detail" style="display: flex;flex-direction: column" >
          <span class="name">{{item.m_class}}</span>
          <span style="color:orange;font-size: 0.8rem">{{item.classNumber}}个商品</span>
        </div>
        <div class="img">
          <img src="/static/store/menu/clear.jpg" alt="" @click="clearClass(index)">
          <img src="/static/store/menu/more.png" alt="" @click="toDishManagement(item.class_id)">
        </div>
      </div>
    </div>
    <div id="Add" :style="{'display':AddDisplay}">
      <div class="title">新增菜品</div>
      <div style="margin-top: 1.4rem">
        <span>品类ID:&nbsp&nbsp&nbsp</span>
        <input type="text" v-model="id">
      </div>
      <div>
        <span>品类名称:</span>
        <input type="text" v-model="name">
      </div>
      <div style="margin-top: 1.3rem">
        <button style="background: #00b900;color: white" @click="submit()">提交</button>
        <button style="background: #c0c0c0;color: white" @click="cancel()">取消</button>
      </div>
    </div>
    <div id="clear" :style="{'display':clearDisplay}">
      <div>
      <span>请确定是否删除一整个菜品类</span>
      </div>
      <div style="margin-top: 1.3rem">
        <button style="background: #00b900;color: white" @click="submit1()">确认</button>
        <button style="background: #c0c0c0;color: white" @click="cancel()">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "index",
    data(){
      return{
        kindNumber: '0',
        totalNumber: '0',
        menuClass:[],
        menu:[],
        newItem:[],
        id:'0',
        name:'',
        deleteClass:'',
        AddDisplay:'none',
        clearDisplay:'none'
      }
    },
    methods:{
      addMenuClass(){
        this.AddDisplay= 'auto'
      },
      submit(){
        let data={
          "class_id": this.id,
          "M_class": this.name,
          "S_id": "s001"
        }
        this.$axios.post("insertMenuClass", data).then(res=>{
          console.log(data);
        });
        this.AddDisplay = 'none'; 
        wx.navigateTo({
          url: '/pages/menuManagement/main'
        })
      },
      clearClass(index){
        this.clearDisplay = 'auto';
        this.deleteClass = this.menuClass[index].class_id;
      },
      submit1(){
        let data={
          "class_id": this.deleteClass,
          "S_id": "s001"
        }
        this.$axios.get("deleteMenuClass", data).then(res=>{
          console.log(data);
        });
        this.clearDisplay = 'none'; 
        wx.navigateTo({
          url: '/pages/menuManagement/main'
        })
      },
      cancel(){
        this.clearDisplay = 'none';
        this.AddDisplay = 'none';
      },
      toDishManagement(id){
        console.log(id);
        wx.navigateTo({
          url: '/pages/dishManagement/main?class=' + id
        })
      },
    },
    mounted(){
      this.$axios.get("class").then(res=>{
        this.menuClass = res.data;
        this.kindNumber = this.menuClass.length;
        for(let i=0;i<this.kindNumber;i++){
          let data = {class_id:this.menuClass[i].class_id};
          this.$axios.get("getMenuByClass",data).then(res=>{
            this.menuClass[i].classNumber = res.data.length.toString();
          });
        }
        console.log(this.menuClass);
      });
      this.$axios.get('menu').then(res=>{
        this.menu = res.data;
        this.totalNumber = this.menu.length;
      });
    }
  }
</script>

<style scoped>
  #index{
    width: 100%;
    height: 100%;
  }
  #header{
    width: 100%;
    height: min-content;
    display: flex;
    flex-direction: row;
  }
  #header .total{
    margin-top: 0.28rem;
    width: max-content;
    margin-left: 0.3rem;
    margin-right: 3.5rem;
    display: flex;
    flex-direction: column;
    font-size: 0.25rem;
    color: gray;
  }
  #header .add{
    margin-top: 0.2rem;
    display: flex;
    flex-direction: row;
    height: 0.7rem;
    width: 2rem;
    border: orange 1px solid;
    color: orange;
  }
  #header .add div:nth-child(1){
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 0.3rem;
    font-size: 0.3rem;
    border-radius: 50%;
    border: 1px orange solid;
    width: 0.45rem;
    height: 0.3rem;
    line-height: 0.3rem;
    text-align: center;
    padding: 0;
  }
  #header .add div:nth-child(2){
    font-size: 0.27rem;
    height: min-content;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 0.2rem;
  }
  #section{
    box-shadow: 0 0 3px 3px rgba(136, 136, 136, 0.2);
    overflow: scroll;
    margin-top: 0.2rem;
    margin-left: auto;
    background: white;
    margin-right: auto;
    height: 83%;
    width: 90%;
    display: flex;
    flex-direction: column;
  }
  .kindItem{
    width: 100%;
    height: 1.2rem;
    display: flex;
    flex-direction: row;
    border-bottom: rgba(136, 136, 136, 0.2) solid 2px;
  }
  .kindItem div span{
    width: max-content;
  }
  .detail{
    margin-top: 0.1rem;
    margin-left: 0.5rem;
    height: max-content;
    width: max-content;
  }
  .img{
    justify-content: flex-end;
    display: flex;
    align-items: center;
  }
  .img img{
    margin-left: 0.2rem;
    width: 0.47rem;
    height: 0.47rem;
  }
  .name{
    color: #2b2b2b;
    font-size: 0.3rem;
    font-weight: bold;
    margin-bottom: 0.13rem;
  }
  #Add{
    position: absolute;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    background: white;
    height: 4.4rem;
    width: 6rem;
    top: 2.5rem;
    left: 0.78rem;
    box-shadow: 0 0 10rem 10rem rgba(0, 0, 0, 0.7);
    z-index: 2;
  }
  #Add div{
    font-size: 0.36rem;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0.3rem;
    height: min-content;
    width: 5rem;
    display: flex;
    flex-direction: row;
  }
  #Add .title{
    font-size: 0.45rem;
    font-weight: bolder;
    padding-bottom: 0.3rem;
    border-bottom: gray 1px solid;
  }
  #Add div span{
    margin-right: 0.1rem;
  }
  #Add div input{
    width: 3.2rem;
    border: black solid 1px;
  }
  #Add div button{
    width: 2rem;
    height: 0.6rem;
    line-height: 0.6rem;
    text-align: center;
  }
  #clear{
    position: absolute;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    background: white;
    height: 2.4rem;
    width: 6rem;
    top: 2.5rem;
    left: 0.78rem;
    box-shadow: 0 0 10rem 10rem rgba(0, 0, 0, 0.7);
    z-index: 2;
  }
  #clear div{
    font-size: 0.36rem;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0.3rem;
    height: min-content;
    width: 5rem;
    display: flex;
    flex-direction: row;
  }
  #clear div span{
    margin-right: 0.1rem;
  }
  #clear div button{
    width: 2rem;
    height: 0.6rem;
    line-height: 0.6rem;
    text-align: center;
  }
</style>
